<template>
  <div class="screen">
    <header>
      售后运营综合看板
    </header>
    <main>
      <div class="left" v-if="refresh">
        <div class="item">
          <div class="item-title">
            销量汇总
          </div>
          <div class="item-content">
            <EchartsOne/>
          </div>
        </div>
        <div class="item">
          <div class="item-title">
            保内故障率/台量
          </div>
          <div class="item-content">
            <EchartsOne/>
          </div>
        </div>
        <div class="item">
          <div class="item-title">
            保外故障率/台量
          </div>
          <div class="item-content">
            <EchartsOne/>
          </div>
        </div>
      </div>
      <div class="center" v-if="refresh">
        <div class="top">
          <UnitInfo v-for="(item,i) in demo2" :key="i" :label="item.label" :value="item.value"/>
        </div>
        <div class="china-map">
          <div class="ranking">
            <div class="item-title">
              <span>客户名称</span>
              <span>区域位置</span>
              <span>产品型号</span>
              <span>设备数量</span>
            </div>
            <div class="item-content">
              <ListOne :list="demo"/>
            </div>
          </div>
          <EchartsMap/>
        </div>
        <div class="bottom">
          <div class="left">
            <div class="label">
              投诉信息
            </div>
            <PieEcharts/>
          </div>
          <div class="right">
            <div class="label">
              调查问卷
            </div>
            <RadarEcharts/>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          客 户 数 据
        </div>
        <div class="item">
          <div class="item-title">
            <span>客户名称</span>
            <span>区域位置</span>
            <span>产品型号</span>
            <span>设备数量</span>
          </div>
          <div class="item-content">
            <ListOne :list="demo"/>
          </div>
        </div>
        <div class="title">
          客 户 提 醒
        </div>
        <div class="item">
          <div class="item-title">
            <span>客户名称</span>
            <span>区域位置</span>
            <span>产品型号</span>
            <span>设备数量</span>
          </div>
          <div class="item-content">
            <ListOne :list="demo"/>
          </div>
        </div>
        <div class="title">
          客 户 提 醒
        </div>
        <div class="item">
          <div class="item-title">
            <span>客户名称</span>
            <span>区域位置</span>
            <span>产品型号</span>
            <span>设备数量</span>
          </div>
          <div class="item-content">
            <ListOne :list="demo"/>
          </div>
        </div>

      </div>
    </main>
  </div>
</template>

<script>
import EchartsOne from "@/views/reports/operation-kanban/components/echarts-one.vue";
import ListOne from "@/views/reports/operation-kanban/components/list-one.vue";
import EchartsMap from "@/views/reports/operation-kanban/components/echarts-map.vue";
import UnitInfo from "@/views/reports/operation-kanban/components/unit-info.vue";
import PieEcharts from "@/views/reports/operation-kanban/components/pie-echarts.vue";
import RadarEcharts from "@/views/reports/operation-kanban/components/radar-echarts.vue";

export default {

  name: "index",
  components: {
    EchartsOne,
    ListOne,
    EchartsMap,
    UnitInfo,
    PieEcharts,
    RadarEcharts
  },
  data() {
    return {
      refresh: false,
      demo: [111, 222, 333, 444, 555, 666, 7777, 8888, 999, 999999],
      demo2: [{
        label: "一次性修复",
        value: "90.00%"
      }, {
        label: "一次性修复",
        value: "90.00%"
      }, {
        label: "一次性修复",
        value: "90.00%"
      }, {
        label: "一次性修复",
        value: "90.00%"
      }]
    }
  },
  activated() {
    this.init()
    document.querySelector(".ele-admin-content-view").style.height = "100%"
    this.refresh = true
    // console.log()
  },
  deactivated() {
    document.querySelector(".ele-admin-content-view").style.height = "auto"
  },
  methods: {
    init() {
      window.addEventListener("resize", this.resizeList)
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('resize', this.resizeList)
      })
    },
    resizeList(event, args = this.$children) {
      const components = args
      if (components.length > 0) {
        components.forEach(component => {
          if (component.myEcharts) {
            component.myEcharts.resize()
          } else if (component.$children.length > 0) {
            this.resizeList(event, component.$children)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}

.screen {
  width: 100%;
  //height: calc(100vh - 100px);
  height: 100%;
  min-height: 0;
  color: white;
  overflow: hidden;
  @include flex-column;
  @include bg-url("~@/assets/liyang/bg.png");


  header {
    width: 100%;
    height: px2vh(100);

    font-size: px2vw(30);
    overflow: hidden;
    font-weight: bolder;
    color: white;
    letter-spacing: px2vw(3);
    text-shadow: 0 0 30px rgba(0, 171, 255, 1);
    @include bg-url("~@/assets/liyang/head.png");
    @include flex-center;
  }

  main {
    flex: 1;
    width: 100%;
    padding: 0 px2vw(30);
    overflow: hidden;
    box-sizing: border-box;
    @include flex-center;

    > .left {
      flex: 465;
      height: 100%;
      padding: px2vh(15) px2vw(10);
      box-sizing: border-box;
      @include flex-center-column;


      .item {
        flex: 303;
        height: 0;
        width: 100%;
        margin-bottom: px2vh(10);
        position: relative;
        @include flex-center-column;
        @include bg-url("~@/assets/liyang/bg_business.png");

        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }

        .item-title {
          flex: 35;
          width: 100%;
          font-size: px2vw(12);
          @include flex-center;
        }

        .item-content {
          height: 0;
          flex: 257;
          width: 100%;
          overflow: hidden;
        }
      }

    }

    > .center {
      flex: 850;
      height: 100%;
      width: 100%;
      padding: px2vh(15) px2vw(10);
      @include flex-center-column;

      .top {
        width: 100%;
        flex: 200;
        @include flex-center;
      }

      .china-map {
        width: 100%;
        flex: 600;
        position: relative;

        > .ranking {
          position: absolute;
          width: 35%;
          height: 40%;
          bottom: px2vh(20) ;
          @include flex-center-column;

          .item-title {
            min-height: 0;
            box-sizing: border-box;
            flex: 46;
            width: 100%;
            font-size: px2vw(12);
            justify-content: space-between;
            align-items: center;
            padding: 0 px2vw(30);
            overflow: hidden;
            @include flex;
            @include bg-url-size("~@/assets/liyang/bg_arrowhead.png", 110%, 180%);

            span {
              flex: 1;
              text-align: center;
            }

          }

          .item-content {
            min-height: 0;
            flex: 257;
            width: 100%;
            overflow: hidden;
            @include flex-center-column;
          }
        }
      }

      .bottom {
        width: 100%;
        flex: 275;
        @include flex-center;

        > .left {
          flex: 100;
          height: 100%;
          @include bg-url("~@/assets/liyang/bg_new2.png");
          display: grid;
          grid-template-rows: 12% 88%;
          margin-right: px2vw(10);

          .label {
            @include flex-center;
          }
        }

        > .right {
          flex: 100;
          height: 100%;
          @include bg-url("~@/assets/liyang/bg_new2.png");
          display: grid;
          grid-template-rows: 12% 88%;

          .label {
            @include flex-center;
          }
        }
      }

    }

    > .right {
      flex: 465;
      height: 100%;
      padding: px2vh(15) px2vw(10);
      //display: grid;
      //grid-template-rows: 5% 26% 5% 26% 5% 26% ;
      box-sizing: border-box;
      overflow: hidden;
      @include flex-center-column;

      .title {
        flex: 50;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        font-size: px2vw(15);
        font-weight: bolder;
        @include flex-center;
        @include bg-url("~@/assets/liyang/bg_internal.png");
      }

      .item {
        flex: 303;
        overflow: hidden;
        min-height: 0;
        width: 100%;
        @include flex-center-column;


        .item-title {
          min-height: 0;
          box-sizing: border-box;
          flex: 46;
          width: 100%;
          font-size: px2vw(12);
          justify-content: space-between;
          align-items: center;
          padding: 0 px2vw(30);
          overflow: hidden;
          @include flex;
          @include bg-url-size("~@/assets/liyang/bg_arrowhead.png", 110%, 180%);

          span {
            flex: 1;
            text-align: center;
          }

        }

        .item-content {
          min-height: 0;
          flex: 257;
          width: 100%;
          overflow: hidden;
          @include flex-center-column;
        }
      }
    }
  }
}

::v-deep .ele-admin-content-view {
  height: 100%;
}
</style>
